<template>
	<div>

		<!-- 返回顶部 -->
		<el-backtop :bottom="100">
		    <div
		      style="{
		        height: 100%;
		        width: 100%;
		        background-color: #fff3e7;
		        box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
		        text-align: center;
		        line-height: 40px;
		        color: #b4af85;
		      }"
		    >
		      TOP
		    </div>
		  </el-backtop>

		<!-- 面包屑 -->
		<div class="ttt">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		</div>

		<!-- <p v-for="item in itemSortList">{{item.name}}~~~{{item.level}}</p> -->
		<!--
		 表名: item_sort

		 需要展示的字段: 商品名称 商品价格 商品详情 商品图片
		 需要操作的字段: id  group_id  level
		 暂时没想到作用的字段: status
		 -->

		<div id="pagehomeeee">
			<div class="con">
				<!-- <ul v-for="(item,index) in itemSortList">
					<table border="1px" :title=item.details>
						<router-link to="/login">
						<img :src="require(`../../assets/images/${item.photoFile}`) ">
						<li>
							{{item.sname}}
							<p style="color: red;">价格￥{{item.price}}</p>
						</li>
						<li>商品详情:{{item.details}}</li>
						</router-link>
					</table>
				</ul> -->
				<ul v-for="(item,index) in itemSortList">
					<table border="0px" :title=item.details>
						<tr>
							<td>
								<div class="border">
								<!-- <router-link :to="{name:'itemDesc',params:item}" > -->
                <a @click="toItemDesc(item)">
								<img :src="require(`../../assets/images/${item.photoFile}`) ">
                </a>
								<!-- </router-link> -->
								</div>
								<div id="smallimgs" >

									<img :src="require(`../../assets/images/${item.photoFile}`)" >


								</div>
								<br />
								{{item.sname}}
								<p style="color: red; font-size: 20px; float: right;">￥{{item.price}}</p>
								<br />
								<!-- 鼠标悬停 出现下划线 -->
								<span id="underline">
								<router-link :to="{name:'itemDesc',params:item}" style="color: #000000; text-decoration: none; " >
								商品详情:{{item.details}}
								</router-link>
								</span>
							</td>
						</tr>
					</table>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	//对外声明 当前组件的属性export default 将组件交给vue对象管理
	export default {
		//定义初始化函数  生命周期
		created() {
			//默认获取商品分类列表数据
			this.findItemSortList()
		},
		data() {
			return {
				//定义商品分类数据
				itemSortList: [],
				itemSort: JSON.parse(window.sessionStorage.getItem('itemSotr'))
			}
		},
		methods: {
			// 传的对象的level 如何确定?
			async findItemSortList() {
				const {
					data: result
				} = await this.$http.post("/aj-itemSort/findItemSortList", this.itemSort)
				// 带参传入
				if (result.status !== 200) return this.$message.error("获取商品分类列表失败!!")
				this.itemSortList = result.data
			},
      toItemDesc(item){
        window.sessionStorage.setItem('itemDesc', JSON.stringify(item))
        this.$router.push("/itemDesc")
      }
		}
	}
</script>

<style>
	ul li {
		/* 清除标点 */
		list-style: none;
	}

	p {
		float: left;
	}

	#pagehomeeee {
    margin-top: 10px;
		padding-left: 300px;
	}

	.ttt {
		padding-left: 460px;
		padding-top: 20px;
	}

	.con ul li {
		width: 180px;
		height: 50px;
		/* float: left; */
		margin: 0px 30px;
		padding: 0px 30px;
	}

	.con {
		vertical-align: top;
	}

	.con table {
		float: left;
		margin: 50px;
	}

	.con img {
		width:  12rem;
		height: 16.25rem;
		padding: 0px 50px;
		border: 5px solid transparent;
	}

	#underline:hover {
		/* float: left; */
		text-decoration: underline;
		/* background-color:yellow; */
	}

	.border:hover{
		/* border:0.5px solid #000000;
		position: relative; */
		box-shadow: 0 0 0 0.5px black;
		outline: 0.5px solid black;
	}

	#smallimgs {
		width: 50px;
		height: 55px;
		border-style: solid;
		border-width: 0.5px;
		border-color: red;
		left: 70px;
		position: relative;

	}

	#smallimgs img {
		width: 50px;
		height: 50px;
		position: relative;
		right: 55px;
	}
  a{
    cursor: pointer;
  }
</style>
